<!--
    /**
     * @author RaoShuang
     * @emil 991207823@qq.com
     * @date 2020/11/23 21:09
     */
-->
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-on:keydown</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>

	<body>
		<div id="app">
            控制键盘输入（限定只能输入数字）<br/>
			Vue:<input type="text" v-on:keydown="fun($event)">
            <hr/>
            传统Js:<input type="text" onkeydown="showKeyCode()"/>
		</div>
	</body>
	<script>
        //传统js的键盘按下事件
        function showKeyCode(){
            //event对象和我们的document对象以及window对象是一样的，可以不用定义直接使用
            var keyCode = event.keyCode;
            //设置只能输入数字
            if(keyCode < 48  || (keyCode > 57 && keyCode < 96) || keyCode > 105){
                //不让键盘的按键起作用
                event.preventDefault();
            }
            // alert(keyCode);
            // if (event.keyCode == 13) {
            //     alert("你按的是回车");
            // }
        }

		//view model
        new Vue({
            el:"#app",
            methods:{
                /**
                 * $event 它是vue中的事件对象  和我们传统js的event对象是一样的
                 */
                fun:function(event){
                    var keyCode = event.keyCode;
                    if(keyCode < 48 || (keyCode > 57 && keyCode < 96) || keyCode > 105){
                        //不让键盘的按键起作用
                        event.preventDefault();
                    }
                }
            }
        });
	</script>

</html>